<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文字环绕</title>
		<style>
			p{
				border: 1px solid red;
				flo at: left;
				font-size: 16px;/* 页面文字默认大小:16px */
				line-height: 20px;/* 浮动p块元素,内容行内元素 */
				/* 结论：文本不能浮动，特点：块包行 */
			}
			img{
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文字环绕</h1>
		<img src="img/img_1.png" alt="新" width="250px" height="250px"/>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam obcaecati, nulla voluptas deserunt a mollitia vero eum hic numquam officiis magni ea asperiores laboriosam vel id debitis iure cum veniam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptatum suscipit veniam ducimus quos illo possimus adipisci est quibusdam magni nemo molestiae earum similique, reprehenderit id magnam quas explicabo voluptates. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt tempora vitae reprehenderit accusamus aperiam temporibus commodi mollitia dignissimos. Aliquam omnis aspernatur exercitationem praesentium sunt laboriosam vitae quos ullam quam maxime! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quasi doloremque est error dolores, possimus voluptate quo cupiditate dignissimos molestiae reiciendis ipsam, voluptatum blanditiis dolor in sed? Dolor officia itaque quas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem modi quibusdam totam impedit commodi optio! Provident, debitis! Tenetur accusantium quibusdam alias rem, ab labore itaque quisquam voluptates? Iste, recusandae illo. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, tenetur incidunt? Aspernatur architecto doloremque consectetur eaque ullam minima voluptate, officia sint reiciendis, harum delectus earum provident, doloribus recusandae necessitatibus rerum! </p>
	</body>
</html>